Trilium allows you to share selected notes as publicly accessible read-only documents. This feature is particularly useful for publishing content directly from your Trilium notes, making it accessible to others online.

Features, interaction and limitations

By note type

  Supported features Limitations
Text
  • Table of contents.
  • Syntax highlight of code blocks, provided a language is selected (does not work if “Auto-detected” is enabled).
  • Rendering for math equations.
  • Including notes (only if the included notes are also shared).
  • Inline Mermaid diagrams are not rendered.
Code
  • Basic support (displaying the contents of the note in a monospace font).
  • No syntax highlight.
Saved Search Not supported.  
Relation Map Not supported.  
Note Map Not supported.  
Render Note Not supported.  
Collections
  • The child notes are displayed in a fixed format. 
  • More advanced view types such as the calendar view are not supported.
Mermaid Diagrams
  • The diagram is displayed as a vector image.
  • No further interaction supported.
Canvas
  • The diagram is displayed as a vector image.
  • No further interaction supported.
Web View Not supported.  
Mind Map The diagram is displayed as a vector image.
  • No further interaction supported.
Geo Map Not supported.  
File Basic interaction (downloading the file).
  • No further interaction supported.

While the sharing feature is powerful, it has some limitations:

Some of these limitations may be addressed in future updates.

Prerequisites

To use the sharing feature, you must have a Server Installation of Trilium. This is necessary because the notes will be hosted from the server.

Sharing a note

  1. Enable Sharing: To share a note, toggle the Shared switch within the note's interface. Once sharing is enabled, an URL will appear, which you can click to access the shared note.

    Share Note

  2. Access the Shared Note: The link provided will open the note in your browser. If your server is not configured with a public IP, the URL will refer to localhost (127.0.0.1).

Sharing a note subtree

When you share a note, you actually share the entire subtree of notes beneath it. If the note has child notes, they will also be included in the shared content. For example, sharing the "Formatting" subtree will display a page with basic navigation for exploring all the notes within that subtree.

Viewing and managing shared notes

You can view a list of all shared notes by clicking on "Show Shared Notes Subtree" in the Global menu. This allows you to manage and navigate through all the notes you have made public.

Security considerations

Password protection

To protect shared notes with a username and password, you can use the #shareCredentialsattribute. Add this label to the note with the format #shareCredentials="username:password". To protect an entire subtree, make sure the label is inheritable.

Advanced sharing options

Customizing the appearance of shared notes

The default design should be a good starting point, but you can customize it using your own CSS:

Adding JavaScript

You can inject custom JavaScript into the shared note using the ~shareJs relation. This allows you to access note attributes or traverse the note tree using the fetchNote() API, which retrieves note data based on its ID.

Adding custom HTML

You can inject custom HTML snippets into specific locations of the shared page using the ~shareHtml relation. The HTML note should contain the raw HTML content you want to inject, and you can control where it appears by adding the #shareHtmlLocation label to the HTML snippet note itself.

The #shareHtmlLocation label accepts values in the format location:position:

For example:

If no location is specified, the HTML will be injected at content:end by default.

Example:

const currentNote = await fetchNote();
const parentNote = await fetchNote(currentNote.parentNoteIds[0]);

for (const attr of parentNote.attributes) {
    console.log(attr.type, attr.name, attr.value);
}

Creating human-readable URL aliases

Shared notes typically have URLs like http://domain.tld/share/knvU8aJy4dJ7, where the last part is the note's ID. You can make these URLs more user-friendly by adding the #shareAlias label to individual notes (e.g., #shareAlias=highlighting). This will change the URL to http://domain.tld/share/highlighting.

Important:

  1. Ensure that aliases are unique.
  2. Using slashes (/) within aliases to create subpaths is not supported.

Setting a custom favicon

To customize the favicon for your shared pages, create a relation ~shareFaviconpointing to a file note containing the favicon (e.g., in .ico format).

Sharing a note as the root

You can designate a specific note or folder as the root of your shared content by adding the #shareRoot label. This note will be linked when visiting [http://domain.tld/share](http://domain/share), making it easier to use Trilium as a fully-fledged website.

Displaying an index of shared notes

When accessing a share, the sub-notes will be displayed in a tree on the left. But since multiple note trees can be shared, it might be useful to display a list of all the different share trees.

To do so, create a shared text note and apply the shareIndex label. When viewed, the list of shared roots will be displayed at the bottom of the note.

Attribute reference

Attribute Description
#shareHiddenFromTree this note is hidden from left navigation tree, but still accessible with its URL
#shareExternalLink note will act as a link to an external website in the share tree
#shareAlias define an alias using which the note will be available under https://your_trilium_host/share/[your_alias]
#shareOmitDefaultCss default share page CSS will be omitted. Use when you make extensive styling changes.
#shareRoot marks note which is served on /share root.
#shareDescription define text to be added to the HTML meta tag for description
#shareRaw Note will be served in its raw format, without HTML wrapper. See also  Serving directly the content of a note for an alternative method without setting an attribute.
#shareDisallowRobotIndexing

Indicates to web crawlers that the page should not be indexed of this note by:

  • Setting the X-Robots-Tag: noindex HTTP header.
  • Setting the noindex, follow meta tag.
#shareCredentials require credentials to access this shared note. Value is expected to be in format username:password. Don't forget to make this inheritable to apply to child-notes/images.
#shareIndex Note with this label will list all roots of shared notes.
#shareHtmlLocation defines where custom HTML injected via ~shareHtml relation should be placed. Applied to the HTML snippet note itself. Format: location:position where location is head, body, or content and position is start or end. Defaults to content:end.

Customizing logo

It's possible to adjust the logo which is displayed on the top-left of the left pane.

Attribute Description
~shareLogo Relation set to an image to use as logo. The image must be part of the share tree (it can be hidden if needed).
#shareLogoWidth The width (in pixels, without unit) to set for the logo. Default is 53.
#shareLogoHeight The height (in pixels, without unit) to set for the logo. Default is 40.
#shareRootLink URL to navigate to when the logo is pressed.

Customizing OpenGraph

Attribute Description
#shareOpenGraphColor This adjusts the theme-color meta-property.
#shareOpenGraphURL This adjusts the og:url and twitter:url meta-properties.
#shareOpenGraphDomain Adjusts the twitter:domain meta-property.
#shareOpenGraphImage
~shareOpenGraphImage
Can be either a label, case in which the value is passed on as-is, or it can be a relation to an image File. This controls the og:image meta-property.

Credits

Since v0.95.0, a new theme was introduced (and enabled by default) which greatly improves the visual aspect of the Share feature, as well as its functionality (such as mobile support, dark/light mode, collapsible tree, etc.). This theme is an adaptation of the Trilium Rocks! by zerebos.